import { WeaTop,WeaAlertPage,WeaUpload,WeaDialog,WeaLocaleProvider, WeaProgress, WeaFormItem } from 'ecCom';
import { observer, inject } from 'mobx-react';
import TaskViewExcel from './excel';
import { Button,Spin, Col, Row } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcExcelPageViewStore')
@observer
export default class EdcExcelPage extends React.Component {
    componentDidMount() {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        store.init({ ...query, from: 'view' });
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps !== this.props) {
            const { edcExcelPageViewStore: store, location: { query } } = nextProps;
            store.init({ ...query, from: 'view' });
        }
    }

    getButtons = () => {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        const readonly = !!query.type? query.type === '0' : !!query.dataid;
        store.canSubmit = !readonly;
        const buttons = readonly ? [
        ] : [
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7ad2nw@save`}  disabled={store.loading} onClick={store.save} type="primary">{getLabel(30986,'保存')}</Button>,
        ];
        (readonly && query.modeId&& store.hasEditRight )? buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zpwz25@edit`}  disabled={store.loading} onClick={store.toEdit} type="primary">{getLabel('501169', '编辑')}</Button>) : "";
        // 需要有完全控制权限的才有
        query.modeId&& store.hasDeleteRight ? buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1hqtwg@delete`}  disabled={store.loading} onClick={store.deleteData} type="primary">{getLabel(502286, '删除')}</Button>) :"";
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@l9k7c3@export`} disabled={store.loading} onClick={store.exportExcel} type="primary">{getLabel(502294,'导出')}</Button>)
        readonly ? "" : buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oeyitp@import`} disabled={store.loading} onClick={(bool) => store.setVisible(bool)} type="primary">{getLabel('502835','导入数据')}</Button>);
        return buttons;
    }
    render() {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        store.readonly = !!query.type ? query.type === '0' : !!query.dataid;
        if (store.loadingPage) {
              return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@etk0pg`} size="large"/></div>
         }
        if (!store.isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@vvl4a7`}><div>{getLabel('382663','暂无权限')}</div></WeaAlertPage>
        }
        return (
            <div className="edc-excel-page">
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@4dfy27`}
                    title={store.title}
                    iconBgcolor="#1a57a0"
                    icon={<i className="icon-coms02-Data-center" />}
                    buttons={this.getButtons()}
                >
                    <TaskViewExcel ecId={`${this && this.props && this.props.ecId || ''}_TaskViewExcel@wroxg9`} store={store} readonly={store.readonly}></TaskViewExcel>
                </WeaTop>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ypq3xw`}
                        onCancel={() => store.setVisible(false)}
                        title={store.uploadtitle}
                        visible={store.visible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 520, height: 250}}
                    >
                    <div style ={{paddingLeft:20, padding:"24px"}}>
                    <div className="text-elli wea-f13" style={{lineHeight:"40px"}}>{getLabel('502836','下载相应的Excel模板')}：
                    <a onClick={store.exportExcel4Upload} type="primary">{store.title || 'Excel模板'}</a></div>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cup4vg`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@052cj5`} span={9}><div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502837','上传数据文件')}（Excel）：</div></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5g0o12`} span={6}><WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@ox909n`}
                        className = "edc-excel-upload"
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bdgqgy`} type="primary">{getLabel('502706','选择Excel文件')}</Button>
                    
                    </WeaUpload></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l3dfdq`} span={8}>{store.uploadName && <div className="text-elli wea-f13" title={store.uploadName} style={{lineHeight:"32px"}}>{store.uploadName}</div>}</Col>
                    </Row>
                    <div style={{lineHeight:"40px"}}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@n9yc17`} type="primary" onClick ={store.loadFile} disabled ={!store.uploadName || store.pgvisible}>{getLabel('514575','开始导入')}</Button></div>
                    { store.pgvisible && <div style={{lineHeight:"40px"}}>{ store.progress > 0 ? getLabel('514576','导入进度') : getLabel('514577','上传中...')}</div>}
                    {/* <div  style={{lineHeight:"32px"}}>{getLabel('502837','上传数据文件')}（Excel）：
                    <div style={{ width: "50px" }}><WeaUpload
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button type="primary">{getLabel('514260','导入')}</Button>
                    
                    </WeaUpload></div>
                    </div> */}
                    { store.pgvisible && store.progress > 0 && <div style ={{paddingLeft:0, paddingTop:0}}>
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@klszt9`} percent={Math.min(store.progress,100)}  strokeColor="#0094FF" />
                        </div>}
                    </div>
                    </WeaDialog>
                    
            </div>
        )
    }
}